<template>
  <el-dialog custom-class="zw_dialog" 
    v-model="props.visible" 
    :width="props.width" 
    destroy-on-close 
    :append-to-body="props.append"
    :before-close="handleClose">
    <template #title>
      <div class="dialog_header">{{ props.title }}</div>
    </template>
    <section>
      <slot></slot>
    </section>
    <template v-if="props.isRenderFooter" #footer>
      <div class="footer">
        <div>
          <span v-show="props.showFootcontent" class="text">{{ props.footContent }}</span>
        </div>
        <span class="dialog_footer">
          <el-button v-if="props.moreBtn"  @click="props.moreBtn">{{ props.moreBtnText }}</el-button>
          <el-button v-if="props.cancel" @click="props.cancel">{{ props.cancelText }}</el-button>
          <el-button v-if="props.save" @click="props.save">{{ props.saveText }}</el-button>
          <el-button v-if="props.submit" :disabled="props.isDisable" :type="!props.isDisable ? 'primary' : 'info'" @click="props.submit">{{ props.submitText }}</el-button>
        </span>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, withDefaults } from 'vue'

const props = withDefaults(defineProps<{
  width?: number | string,
  visible: boolean,
  title: string,
  cancelText?: string,
  saveText?: string,
  submitText?: string,
  cancel?: () => void,
  save?: () => void
  submit?: () => void
  moreBtn?:()=>void
  moreBtnText?: string,
  isDisable?: boolean,
  showFootcontent?: boolean,
  footContent?: string,
  append?: boolean,
  uploadShow?: boolean,
  isRenderFooter?: boolean
}>(), {
  submitText: '确认',
  cancelText: '取消',
  saveText: '保存',
  width: '30%',
  isRenderFooter: true
})

const handleClose = (done: () => void) => {
  props.cancel?.()
  done()
}
const upload = (val: any) => {}
</script>
<style lang="scss">
.zw_dialog {
  .el-dialog__header {
    padding: 0px;
    margin-right: 0px;
    .el-dialog__headerbtn {
      top: 0;
      .el-dialog__close {
        font-size: 20px;
      }
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .text {
      font-size: 14px;
      font-family: STHeitiSC-Light, STHeitiSC;
      font-weight: 300;
      color: #969696;
      line-height: 14px;
    }
  }
  .el-dialog__body {
    padding: 10px 30px;
  }
  .dialog_header {
    height: 50px;
    display: flex;
    padding: 0 30px;
    align-items: center;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #33302d;
    line-height: 16px;
    border-bottom: 1px solid var(--border-color);
  }
  .el-dialog__footer {
    height: 60px;
    box-sizing: border-box;
    padding: 10px 30px;
    border-top: 1px solid var(--border-color);
    .el-button {
      height: 36px;
      min-height: auto;
    }
    .upload_demo {
      display: inline-block;
      cursor: pointer;
    }
  }
  .ml20 {
    margin-left: 20px;
  }
}
</style>
